<!--  -->
<template>
  <el-button :disabled="disabled" @click="handleSend" :round="round" class="btn">{{ text }}</el-button>
</template>

<script setup>
const props = defineProps({
  field: {
    type: String,
    default: 'phone'
  },
  params: {
    type: Object,
    default: ()=>{}
  },
  elRef: '',
  round: {
    type: Boolean,
    default: true
  },
})


const disabled = ref(false)
const text = ref('发送验证码')

const handleSend = () => {
  props.elRef.validateField([props.field], valid => {
    if (valid) {
      console.log(props.params)
      if(props.params.type === "USER_RETRIEVE"){
        // 找回密码
        api.get(`/user/front/getRetrievePwdSmsCode/${props.params.phone}`,{},{msg:true,loading:true}).then(res => {
          afterSend();
        })
      }else{
        api.post('/smsCodeLog/send',props.params,{msg:true,loading:true}).then(res => {
          afterSend();
        })
      }
      
      return;
    }
  })
}
const afterSend = () => {
  if (disabled.value) return;
  disabled.value = true;
  let n = 60;
  text.value = `剩余 ${n} s`;
  const run = setInterval(() => {
    n = n - 1;
    text.value = `剩余 ${n} s`;

    if (n < 0) {
      clearInterval(run);
      disabled.value = false;
      text.value = '重新发送'
    }
  }, 1000);
}
</script>
<style lang='scss' scoped>
.btn{
  color: var(--use-color-warning);
}
</style>
